<template>
  <router-link to="detailPage">
    <div class="choiceness">
      <van-swipe class="my-swipe" :autoplay="4000" :touchable="false">
        <van-swipe-item>
          <Choiceness_a></Choiceness_a>
        </van-swipe-item>
        <van-swipe-item>
          <Choiceness_b></Choiceness_b>
        </van-swipe-item>
        <van-swipe-item>
          <Choiceness_c></Choiceness_c>
        </van-swipe-item>
      </van-swipe>
      <!-- 纵向的轮播 -->
      <div class="zero">0</div>
      <div class="up">
        <van-swipe style="height: 200px" :autoplay="4000" vertical>
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
          <van-swipe-item>5</van-swipe-item>
          <van-swipe-item>6</van-swipe-item>
          <van-swipe-item>7</van-swipe-item>
          <van-swipe-item>8</van-swipe-item>
          <van-swipe-item>9</van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </router-link>
</template>

<script setup>
// 引入每一页
import Choiceness_a from "./choiceness/Choiceness_a.vue";
import Choiceness_b from "./choiceness/Choiceness_b.vue";
import Choiceness_c from "./choiceness/Choiceness_c.vue";
</script>

<style lang="less" scoped>
a {
  color: #000;
  .choiceness {
    width: 100%;
    height: 100%;
    .my-swipe {
      height: 100%;
    }
    .van-swipe-item {
      height: 100%;
      overflow: hidden;
    }
    :deep(.van-swipe__indicators) {
      width: 0;
      height: 0;
    }
    .up {
      position: relative;
      width: 19.333vw;
      height: 30.333vw;
      top: -168vw;
      left: 80.667vw;
      z-index: 100;
      font-size: 29.667vw;
      color: #fff;
      font-weight: 600;
    }
    .zero {
      position: absolute;
      width: 19.333vw;
      height: 30.333vw;
      top: 10vw;
      left: 64.667vw;
      z-index: 110;
      font-size: 29.667vw;
      color: #fff;
      font-weight: 600;
    }
  }
}
</style>
